<%--
  Created by IntelliJ IDEA.
  User: A
  Date: 2021/1/4
  Time: 16:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="../js/bootstrap.min.js"></script>

    <style type="text/css">

        .div{
            display:none;
            border:1px solid ;
            height:40%;
            width:30%;
            position:absolute;/*让节点脱离文档流,我的理解就是,从页面上浮出来,不再按照文档其它内容布局*/
            top:24%;/*节点脱离了文档流,如果设置位置需要用top和left,right,bottom定位*/
            left:24%;
            z-index:2;/*个人理解为层级关系,由于这个节点要在顶部显示,所以这个值比其余节点的都大*/
            background: white;
        }

        .div1{
            width: 100%;
            height: 100%;
            opacity:0.3;/*设置背景色透明度,1为完全不透明,IE需要使用filter:alpha(opacity=80);*/
            filter:alpha(opacity=80);
            display: none;
            position:absolute;
            top:0;
            left:0;
            z-index:1;
            background-color: rgb(0,0,0);
        }
    </style>

    <script>

        chaXunFaPiao();
        $(function () {
            //添加点击事件  点击添加按钮开启div
            $("#tianjiab").click(function () {
                $("#tianjiaT").show();
                $("#tianjia1").show();
            })
            //添加点击事件  点击关闭按钮关闭div
            $("#guanbiT").click(function () {
                $("#tianjiaT").hide();
                $("#tianjia1").hide();
            })
            //重置 添加
            $("#chongzhiT").click(function () {
                $("#numberT").val("");
                $("#nameT").val("");
                $("#casT").val("");
                $("#priceT").val("");
                $("#unitT").val("");
            })
            //重置 修改
            $("#chongzhiX").click(function () {
                $("#numberX").val("");
                $("#nameX").val("");
                $("#casX").val("");
                $("#priceX").val("");
                $("#unitX").val("");
            })
            //库存 修改判断单选框选中
            $("#xiugaib").click(function () {
                //判断有没有点击到单选框
                var del = $("input[name='name']:checked").val();
                if (del == undefined) {
                    alert("请选择一行数据");
                    return;
                }
                $("#xiuGaiX").show();
                XiuGaiFuZhi1();
                $("#tianjia1").show();
            })
            //关闭修改文本框
            $("#guanbiX").click(function () {
                $("#xiuGaiX").hide();
                $("#tianjia1").hide();
            })
            //删除   判断单选框选中
            $("#shanchub").click(function () {
                //判断有没有点击到单选框
                var del = $("input[name='name']:checked").val();
                if (del == undefined) {
                    alert("请选择一行数据");
                    return;
                }
            })
            //关闭自动增加  div
            $("#guanbi3").click(function () {
                $("#kuCunZengJia").hide();
                $("#tianjia1").hide();
            })

        })

        /**
         * 查询发发票表  和 模糊查询
         */
        function chaXunFaPiao() {

            var name=$("#name1").val();
            var cas=$("#cas1").val();

            var data={
                "type":29,
                "name":name,
                "cas":cas,
            }
            $.ajax({
                url:"/se", //地址
                type:"get",                          //请求方式
                data:data,                         //参数
                dataType:"json",

                success:function (data,status) {
                    $("#tbody1").empty();
                    console.log(data);
                    var tr = "";
                    for (var i = 0; i <data.length ; i++) {
                        tr+="<tr><td><input type='radio' value='"+data[i].sid+"' name='name'></td>"+
                            "<td>"+data[i].zid+"</td>" +
                            "<td>"+data[i].name+"</td>"+
                            "<td>"+data[i].cas+"</td>"+
                            "<td>"+data[i].number+"</td>"+
                            "<td>"+data[i].price+"</td>"+
                            "<td>"+data[i].unit+"</td>" +
                            "<td>"+data[i].create_time+"</td>"+
                            "<td><button value='"+data[i].sid+"' id='tianjiaF' onclick='zengjiabutton("+data[i].sid+")'>"+
                            "自动计算数量</button></td></tr>";
                    }
                    $("#tbody1").append(tr);
                    console.log("成功了库存模糊查询");
                },
                error:function (jqxhr,textStatus,error) {
                    console.log("报错了");
                    console.log(error);
                }
            })
        }


        /**
         * 添加
         */
        function tianJia() {
            var name=$("#nameT").val();
            var cas=$("#casT").val();
            var number=$("#numberT").val();
            var price=$("#priceT").val();
            var unit=$("#unitT").val();

            if(""==$("#nameT").val() || ""==$("#casT").val() ||
                ""==$("#numberT").val() || ""==$("#priceT").val() || ""==$("#unitT").val()){
                alert("不能为空");
                return;
            }

            var data={
                "type":30,
                "name":name,
                "cas":cas,
                "number":number,
                "price":price,
                "unit":unit,
            }
            $.ajax({
                url:"/se", //地址
                type:"get",                          //请求方式
                data:data,                         //参数
                //dataType:"text",

                success:function (data,status) {

                    //window.location.href="/view/kuCun.jsp";
                    chaXunFaPiao();
                    $("#tianjiaT").hide();
                    $("#tianjia1").hide();
                    console.log("成功了发票添加");
                },
                error:function (jqxhr,textStatus,error) {
                    console.log("报错了");
                    console.log(error);
                }
            })
        }


        /**
         *  修改
         */
        function faPiaoXiuGai() {

            var name=$("#nameX").val();
            var cas=$("#casX").val();
            var number=$("#numberX").val();
            var price=$("#priceX").val();
            var unit=$("#unitX").val();
            var sid=$("input[name='name']:checked").val();

            if(""==$("#nameX").val() || ""==$("#casX").val() ||
                ""==$("#numberX").val() || ""==$("#priceX").val() || ""==$("#unitX").val()){
                alert("不能为空");
                return;
            }

            var data={
                "name":name,
                "cas":cas,
                "number":number,
                "price":price,
                "unit":unit,
                "sid":sid,
                "type":31,
            }
            $.ajax({
                url:"/se", //地址
                type:"post",                          //请求方式
                data:data,                         //参数
                dataType:"text",

                success:function (data,status) {
                    if(status=="success") {
                        console.log("成功了库存修改");
                       chaXunFaPiao();
                        $("#xiuGaiX").hide();
                        $("#tianjia1").hide();
                    }
                },
                error:function (jqxhr,textStatus,error) {
                    console.log("报错了");
                    console.log(error);
                }
            })
        }

        /**
         * 修改文本框 放值
         */
        function XiuGaiFuZhi1() {

            var sid=$("input[name='name']:checked").val();

            var data={
                "type":32,
                "sid":sid
            }
            $.ajax({
                url:"/se", //地址
                type:"get",                          //请求方式
                data:data,                         //参数
                dataType:"json",

                success:function (data,status) {
                    $("#nameX").val(data.name);
                    $("#casX").val(data.cas);
                    $("#numberX").val(data.number);
                    $("#priceX").val(data.price);
                    $("#unitX").val(data.unit);
                        console.log("成功了修改放值文本框");

                },
                error:function (jqxhr,textStatus,error) {
                    console.log("报错了");
                    console.log(error);
                }
            })
        }


        /**
         * 发票  删除
         */
        function shanChuFaPiao() {

            var sid=$("input[name='name']:checked").val();

            var data={
                "type":33,
                "sid":sid
            }
            $.ajax({
                url:"/se", //地址
                type:"get",                          //请求方式
                data:data,                         //参数
                dataType:"text",

                success:function (data,status) {
                   chaXunFaPiao();
                    console.log("成功了删除");
                },
                error:function (jqxhr,textStatus,error) {
                    console.log("报错了");
                    console.log(error);
                }
            })
        }


        //增加数量 触发一个函数
        function zengjiabutton(sid) {
            $("#kuCunZengJia").show();
            $("#tianjia1").show();
            $("#id1").val(sid);
        }

        //自动增加数量
      // $(function () {
      //     $("#qr").click(function () {
      //         var number=$("#zengjia").val();
      //         var sid=$("#id1").val();
      //
      //         var data={
      //             "number":number,
      //             "sid":sid,
      //             "type":34,
      //         }
      //         $.ajax({
      //             url:"/se", //地址
      //             type:"post",                          //请求方式
      //             data:data,                         //参数
      //             dataType:"text",
      //
      //             success:function (data,status) {
      //                 console.log("成功了库存增加");
      //                 $("#kuCunZengJia").hide();
      //                 $("#tianjia1").hide();
      //                 $("#zengjia").val("");
      //                 chaXunFaPiao();
      //             },
      //             error:function (jqxhr,textStatus,error) {
      //                 console.log("报错了");
      //                 console.log(error);
      //             }
      //         })
      //     })
      // })

        /**
         * 库存 自动增加数量
         */
        function kunCunZengJia() {

            var number=$("#zengjia").val();
            var sid=$("#id1").val();

            if(""==$("#zengjia").val()){
                alert("不能为空");
                return;
            }

            var data={
                "number":number,
                "sid":sid,
                "type":34,
            }
            $.ajax({
                url:"/se", //地址
                type:"post",                          //请求方式
                data:data,                         //参数
                dataType:"text",

                success:function (data,status) {
                        console.log("成功了库存增加");
                        $("#kuCunZengJia").hide();
                        $("#tianjia1").hide();
                        $("#zengjia").val("");
                        chaXunFaPiao();
                },
                error:function (jqxhr,textStatus,error) {
                    console.log("报错了");
                    console.log(error);
                }
            })
        }


    </script>
</head>
<body>
<div style="display: flex;margin-left: 15%">
    
        cas号<input type="text" placeholder="请输入"  value="" id="cas1">
        产品名称<input type="text" placeholder="请输入"  value="" id="name1">
        <input type="button" value="查询" style="background-color: #00feff" onclick="chaXunFaPiao()">


    <input type="button" value="添加" id="tianjiab" style="background-color: #50fa7b;height: 26px">
    <input type="button" value="修改" id="xiugaib" style="background-color: #50fa7b;height: 26px">
    <input type="button" value="删除" id="shanchub" style="background-color: #50fa7b;height: 26px" onclick="shanChuFaPiao()">

</div>
<table class="table table-striped">
    <caption></caption>
    <thead>
    <tr>
        <th></th>
        <th>序号</th>
        <th>发票品名</th>
        <th>cas号</th>
        <th>数量</th>
        <th>价格</th>
        <th>单位</th>
        <th>创建日期</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="tbody1">
    <%--        <tr>--%>
    <%--        <td><input type="radio" name="name" value="${item.gid}"></td>--%>
    <%--        <td>${item.gid}</td>--%>
    <%--        <td>${item.user_name}</td>--%>
    <%--        <td>${item.name}</td>--%>
    <%--        <td>${item.phone}</td>--%>
    <%--        <td>${item.wechat}</td>--%>
    <%--        <td>${item.status}</td>--%>
    <%--        <td>${item.create_time}</td>--%>
    <%--        <td>${item.remark}</td>--%>
    <%--        </tr>--%>
    </tbody>
</table>


<!--发票添加-->
<div class="div" id="tianjiaT" hidden="hidden" style="height: 50vh;overflow-y: scroll;text-align:center">
    <table  class="table table-striped">
        <tr>
            <td><p>信息</p></td>
        </tr>
        <tr>
            <td>发票品名:</td>
            <td><input  placeholder="请输入发票品名" value="" id="nameT"></td>
        </tr>
        <tr>
            <td>cas号:</td>
            <td><input  placeholder="请输入cas号"  value="" id="casT"></td>
        </tr>
        <tr>
            <td>数量:</td>
            <td><input  placeholder="请输入数量" value="" id="numberT"></td>
        </tr>
        <tr>
            <td>价格:</td>
            <td><input  placeholder="请输入价格" value="" id="priceT"></td>
        </tr>
        <tr>
            <td>单位</td>
            <td><textarea placeholder="请输入单位"  value="" style="height: 108px; margin: 0px; width: 202px;" id="unitT"></textarea></td>
        </tr>
    </table>
          <input type="button" value="立即提交" onclick="tianJia()">
          <input type="button" value="关闭" id="guanbiT">
          <input type="button" value="重置" id="chongzhiT">

</div>


<!--发票修改-->
<div class="div" id="xiuGaiX" hidden="hidden" style="height: 50vh;overflow-y: scroll;text-align:center">
    <table class="table table-striped">
        <tr>
            <td><p>信息</p></td>
        </tr>
        <tr>
            <td>发票品名:</td>
            <td><input  placeholder="请输入发票品名" value="" id="nameX"></td>
        </tr>
        <tr>
            <td>cas号:</td>
            <td><input  placeholder="请输入cas号"  value="" id="casX"></td>
        </tr>
        <tr>
            <td>数量:</td>
            <td><input  placeholder="请输入数量" value="" id="numberX"></td>
        </tr>
        <tr>
            <td>价格:</td>
            <td><input  placeholder="请输入价格" value="" id="priceX"></td>
        </tr>
        <tr>
            <td>单位</td>
            <td><textarea placeholder="请输入单位"  value="" style="height: 108px; margin: 0px; width: 202px;" id="unitX"></textarea></td>
        </tr>
    </table>
         <input type="button" value="立即提交" onclick="faPiaoXiuGai()">
         <input type="button" value="关闭" id="guanbiX">
         <input type="button" value="重置" id="chongzhiX">
</div>

<!--库存增加-->
<div class="div" id="kuCunZengJia" hidden="hidden" style="height: 50vh;overflow-y: scroll">
    <p>请输入要增加的数量</p><br/>
    <input type="text" value="" id="zengjia"><br/>
    <input type="button" value="确定" id="qr" onclick="kunCunZengJia()">
    <input type="button" value="关闭" id="guanbi3">
</div>

<input type="hidden" name="sid" id="id1">
<div class="div1" hidden="hidden" id="tianjia1"></div>
</body>
</html>
